<template>
  <ve-form-item class="stage-fee-item" :required="true" :label="feeOption.itemName" :labelWidth="200" unit="元" v-bind="$attrs">
    <template #label>
      <view class="stage-fee-item-label">
        {{ feeOption.itemName }}
        <text v-if="$attrs.required" class="stage-fee-item-required">*</text>
        <view class="reduction-btn" v-if="!feeOption.showCostTypeSwitch && feeOption.costType == 20">减免金额</view>
      </view>
    </template>
    <ve-input-number
      :precision="2"
      :model-value="feeOption.amount"
      @blur="(val) => (feeOption.amount = val)"
      @clear="() => (feeOption.amount = '')"
    />
    <template #rightContent v-if="feeOption.showCostTypeSwitch">
      <ve-radio v-model="feeOption.costType" :list="feeCostTypeOptionList" />
    </template>
  </ve-form-item>
</template>
<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    feeIndex: Number,
    feeList: Array,
  })
  const feeOption = computed(() => {
    return props.feeList[props.feeIndex]
  })
  const feeCostTypeOptionList = [
    {
      label: '收款',
      value: 10,
    },
    {
      label: '付款',
      value: 20,
    },
  ]
</script>
<style lang="less" scoped>
  .stage-fee-item {
    /deep/ .ve-form-item__body {
      padding: 32rpx 0;
    }
  }
  .stage-fee-item-label {
    display: flex;
    align-items: center;
    .stage-fee-item-required {
      color: #f53f3f;
      line-height: 1;
      vertical-align: middle;
      font-size: 20px;
      position: relative;
      top: 4rpx;
    }
  }
  .reduction-btn {
    height: 40rpx;
    background: #e8f7ff;
    border-radius: 1988rpx 1988rpx 1988rpx 1988rpx;
    border: 2rpx solid #3491fa;
    font-size: 24rpx;
    font-weight: 500;
    color: #3491fa;
    line-height: 40rpx;
    margin-left: 16rpx;
    display: flex;
    align-items: center;
    padding: 0 16rpx;
  }
</style>
